import {messages} from "share/common";
import React from 'react';
import menuRoute from 'routes/menuRoute'
import 'styles/expense-reimbursement-control/mileage-subsidy/mileage-subsidy.scss'


class StaircaseMileage extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: [],
      show: false,
      mileageSetting: menuRoute.getRouteItem('staircase-mileage-setting', 'key')
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.mileageData) {
      let data = nextProps.mileageData
      let value = [];
      data.map((item, index) => {
        // 第${index+1}阶梯
        let step = messages('setting.key1462',{arg1: index + 1}/*第{arg1}阶段*/);
        if (index + 1 === data.length) {
          value.push(`${data[index].startUnit.toFixed(2)}<${step}≤${data[index].endUnit === -1 ? messages('setting.key806'/*无限*/) : data[index].endUnit.toFixed(2)}`);
          return
        }
        value.push(`${data[index].startUnit.toFixed(2)}<${step}≤${data[index].endUnit.toFixed(2)},`);
      });
      this.setState({value, show: nextProps.show});
    }
  }

  render() {
    const {value, show} = this.state;
    return (
      <div className="staircase-mileage">
        <div className={show ? '' : ' hide'}>
          {/*阶梯里程*/}
          <span className="title">{messages('setting.key809'/*阶梯里程*/)}：</span>
          {value.map((item, index) => {
            return (
              <span className="title mileage-num" key={index}>{item}</span>
            )
          })}
        </div>
      </div>
    );
  }
}

StaircaseMileage.contextTypes = {
  router: React.PropTypes.object,
  show: React.PropTypes.bool,  //是否显示
};

StaircaseMileage.propTypes = {
  mileageData: React.PropTypes.array,
};

StaircaseMileage.defaultProps = {
  mileageData: [],

};

export default StaircaseMileage;
